<template>
  <div class="app-container">
    <el-dialog title="限制条件" :visible.sync="subtableCartridgeCom" :close-on-click-modal="false"
               :close-on-press-escape="false" width="70%">

      <!-- vxe检索数据组件 -->
      <!-- <search-form
        ref="searchForm"
        :formSearchData.sync="formSearchData"
        @resetSearchEventEmit="resetSearchEventEmit"
        @searchEventEmit="searchEventEmit"
      >
      </search-form> -->


      <!-- 表格组件 -->
      <ex-base-table
        ref="exBaseTable"
        :loading.sync="loading"
        :tableColumn="tableColumn"
        :tableData="tableData"
        :isDropdownMenuEvent="false"
        :isVxeCheckbox="false"
        @handleCreateEmit="handleCreateEmit"
        @handleRmoveColEmit="handleRmoveColEmit"
        @handleUpdateEmit="handleUpdateEmit"
      >
      </ex-base-table>

      <!-- 分页组件 -->
      <Pagination
        v-show="tablePage.totalResult>0"
        :limit.sync="tablePage.pageSize"
        :page.sync="tablePage.currentPage"
        :total="tablePage.totalResult"
        @pagination="pageFindList"
      />


      <!-- 表单提交组件 -->
      <submit-form
        ref="limitForm"
        :dialogFormVisibleLimit.sync="dialogFormVisibleLimit"
        :dialogStatus="dialogStatus"
        :formSubmitData="formSubmitData"
        :lpOptions="lpOptions"
        @handleFromCreateDataEmit="handleFromCreateDataEmit"
        @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
        @resetFormDataEmit="resetFormSubmitData"
      >
      </submit-form>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

import {
  findlimiting,
  addlimiting,
  autoCodeS,
  updatelimiting,
  dellimiting,
  judgepriority
} from './service/baseApi'


// 基础表格组件
import ExBaseTable from '@/components/VxeTable/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'
import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData],
  components: {
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {
        term_rate_code: '',
        term_rate_name: ''
      },
      // 排序条件
      sortField: '',
      sortFlag: '',
      /* 表单相关 */
      dialogFormVisibleLimit: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: "",
        restrictions_code: "",
        restrictions_name: '',
        restrictions_type: "",
        operator: '',
        constant: '',
        attachment_conditions: '',
        attachment_conditionsname: "",
        ctb_weight: '',
        ctb_condition: '',
        priority: '',
        remark: '',
      },
      initFormSubmitData: {
        id: "",
        restrictions_code: "",
        restrictions_name: '',
        restrictions_type: "",
        operator: '',
        constant: '',
        attachment_conditions: '',
        attachment_conditionsname: "",
        ctb_weight: '',
        ctb_condition: '',
        priority: '',
        remark: '',
      },
      lpOptions: [],
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据

    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    subtableCartridgeCom: {
      get() {
        return this.dialogFormLimitingConditions
      },
      set(val) {
        this.$emit('update:dialogFormLimitingConditions', val)
      }
    },
  },
  props: {
    // 是否显示下拉框
    dialogFormLimitingConditions: {
      type: Boolean,
      default: false
    },
    // 列表数据
    limitingConditionsData: {
      type: Object,
      default: {
        id: undefined
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {


    /* API数据操作相关 */
    // 查询新增的时候期限点编号
    async queryPeriodCode() {
      return await autoCodeS()
    },

    // 查询数据
    findList() {
      this.loading = true
      // 请求表格数据
      findlimiting({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        m_id: this.limitingConditionsData.id
        // ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        console.log(data)
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList() {

      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        // { field: 'te_date', title: '生效日期', width: 200 , showOverflow: true},
        {field: 'restrictions_code', title: '限制条件编号', width: 300},
        {field: 'restrictions_name', title: '限制条件名称', width: 200},
        {field: 'restrictions_typename', title: '限制条件', width: 200},
        {field: 'operatorname', title: '运算符', width: 300},
        {field: 'constant', title: '常量', width: 300},
        {field: 'attachment_conditionsname', title: '附件条件', width: 300},
        {field: 'ctb_weight', title: '兜底权重/常量值', width: 300},
        {field: 'ctb_conditionname', title: '兜底条件', width: 300},
        {field: 'priority', title: '优先级', width: 300},

        // {field: 'remark', title: '备注', width: 300}
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {
      // 重置表单内容
      this.resetFormSubmitData()
      this.dialogStatus = type
      this.queryPeriodCode().then(({data}) => {
        this.resetFormSubmitData({
          replaceObj: {
            restrictions_code: data.rows.restrictions_code
          }
        })
      })
      this.dialogFormVisibleLimit = true
      this.$nextTick(() => {
        this.$refs.limitForm.$refs['dataForm'].clearValidate()
      })

    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      this.resetFormSubmitData({
        resetObj: Object.assign({}, row),
        replaceObj: {
          remark: "",
        },
        exclude: []
      })

      this.dialogStatus = type
      this.dialogFormVisibleLimit = true
      // this.$nextTick(() => {
      //   this.$refs.limitForm.$refs['dataForm'].clearValidate()
      // })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      dellimiting({
        id: row.id
      }).then(({data}) => {

        this.findList()
        // 关闭加载特效

      })
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit() {
      // judgepriority({
      //   m_id: this.limitingConditionsData.id,
      //   priority: this.formSubmitData.priority
      // }).then(({data}) => {
      //   console.log(data)
      //   if (data.rows == "true") {
      updatelimiting({
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {
        this.findList()
        // 关闭加载特效
      })
      // } else {
      //   this.$message.error('当前优先级存在，最大优先级为' + data.rows + '  !');
      // }
      // })
    },

    // 增加
    handleFromCreateDataEmit() {
      judgepriority({
        m_id: this.limitingConditionsData.id,
        priority: this.formSubmitData.priority
      }).then(({data}) => {
        console.log(data)
        if (data.rows == "true") {
          addlimiting({
            m_id: this.limitingConditionsData.id,
            ...this.formSubmitData,  //检索条件
          }).then(({data}) => {
            this.findList()
          })
        } else {
          this.$message.error('当前优先级存在，最大优先级为' + data.rows + '  !');
        }
      })

    },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      this.tablePage.currentPage = 1
      this.findList()
    },
  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    // this.keyupEvent4()
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>
